<template>
  <div ref="mainDiv" class="scroll-wrap tenancy-block" style="height: 100%">
    <div class="datascreen-wrap">
      <HeaderScreen :user-info="userInfo" />
      <div class="data-container clearfix">
        <div class="container">
          <h4 class="title-txt">请选择您所要查看的项目</h4>
          <el-row :gutter="20" class="project-manage">
            <el-col
              v-for="(item, index) in projectList"
              :key="index"
              :span="8"
              style="position: relative"
            >
              <a @click="gotoProjectManage(item)">
                <el-card class="box-card" shadow="hover">
                  <div class="pic">
                    <el-image :src="item.logo | imgPath" fit="cover">
                      <div
                        slot="error"
                        class="image-slot"
                        style="
                          text-align: center;
                          height: 100%;
                          line-height: 200px;
                        "
                      >
                        <img
                          src="~@/assets/img/defaultimg.png"
                          style="vertical-align: middle"
                        >
                      </div>
                    </el-image>
                  </div>
                  <div class="item">
                    <el-tooltip
                      effect="dark"
                      :content="item.name"
                      placement="top-start"
                    >
                      <div class="title text-ellipsis" v-text="item.name" />
                    </el-tooltip>
                    <div
                      class="clearfix"
                      style="line-height: 30px; font-size: 28px"
                    >
                      <div class="pull-left type">
                        <i>项目编号：</i><span v-text="item.welderNumber" />
                      </div>
                    </div>
                    <div
                      class="clearfix"
                      style="line-height: 30px; font-size: 28px"
                    >
                      <div class="pull-left type">
                        <i>开始时间：</i>
                        {{
                          item.startTime | dateFormat("YYYY年MM月DD日 HH:mm")
                        }}
                      </div>
                    </div>
                    <div
                      class="clearfix"
                      style="line-height: 30px; font-size: 28px"
                    >
                      <div class="pull-left type">
                        <i>结束时间：</i>
                        {{ item.endTime | dateFormat("YYYY年MM月DD日 HH:mm") }}
                      </div>
                    </div>
                    <div
                      class="clearfix"
                      style="line-height: 30px; font-size: 28px"
                    >
                      <div class="pull-left type">
                        <i>动火等级：</i> {{ item.hotLevel }}
                      </div>
                    </div>
                    <div class="clearfix">
                      <div class="adres text-ellipsis" style="max-width: 100%">
                        <i>详细地址：</i>
                        {{ item.provinceName }}{{ item.cityName
                        }}{{ item.countryName }}{{ item.screenName
                        }}{{ item.address }}
                      </div>
                      <template
                        v-if="
                          item.userInfo &&
                            item.userInfo.projExeManager &&
                            item.userInfo.projExeManager.length > 0
                        "
                      >
                        <div class="xumang">
                          <el-avatar
                            v-if="item.userInfo.projExeManager[0].picture"
                            :src="
                              item.userInfo.projExeManager[0].picture
                                | imgPath('sm')
                            "
                          />
                          <el-avatar
                            v-else
                          >{{
                            item.userInfo.projExeManager[0].username.substring(
                              item.userInfo.projExeManager[0].username
                                .length - 2,
                              item.userInfo.projExeManager[0].username.length
                            )
                          }}
                          </el-avatar>
                          <span
                            class="n"
                          >{{ item.userInfo.projExeManager[0].username }}
                          </span>
                        </div>
                      </template>
                    </div>
                  </div>
                </el-card>
              </a>
            </el-col>
          </el-row>
          <div class="page-block">
            <pagination
              :background="true"
              layout="total,prev, pager, next"
              :total="total"
              :page.sync="page.p"
              :limit.sync="page.ps"
              @pagination="getProjectList"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderScreen from '../screen/header/header-screen'
import { postHandle } from '@/api'
import Pagination from '../../../../components/Pagination/index'
export default {
  components: { Pagination, HeaderScreen },
  data() {
    return {
      page: {
        p: 1,
        ps: 6
      },
      projectList: [],
      total: 0
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.user
    }
  },
  created() {
    this.getProjectList()
  },
  methods: {
    getProjectList() {
      const req = {
        d: {
          page: this.page,
          filters: [
            {
              field: 'userId',
              operator: 'EQUALS',
              value: this.userInfo.userId
            }
          ],
          sorts: [{ field: 'startTime', isDesc: true }],
          retPage: true
        }
      }
      postHandle(
        '/api/v1/welder-sbtx-second/project-info-comb/list-project',
        req
      ).then((response) => {
        this.projectList = response.result
        this.total = response.page.ts
      })
    },
    gotoProjectManage(item) {
      this.$store.commit('project/SET_ROLES', [])
      this.$store.commit('enterprise/SET_ENTSPACEID', item.entSpaceId)
      this.$store.commit('project/SET_SPACEID', item.spaceId)
      this.$store.commit('project/SET_OBJECT', item)
      this.$router.push({ path: '/' })
    }
  }
}
</script>

<style lang="scss">
.project-manage {
  .el-card {
    margin-bottom: 20px;
    height: 434px;
    position: relative;
    .el-card__body {
      padding: 0;
    }
    .item {
      padding: 20px;
      .title {
        font-size: 18px;
        color: #444;
        margin-bottom: 15px;
      }
      .type {
        font-size: 12px;
        color: #555;
        i {
          color: #9b9b9b;
        }
      }
      .pull-right {
        font-size: 18px;
      }
      .desc {
        font-size: 14px;
        color: #9b9b9b;
        line-height: 24px;
        margin: 15px 0;
        height: 72px;
        overflow: hidden;
      }
      .adres {
        color: #777;
        font-size: 12px;
        max-width: 60%;
        i {
          padding-right: 5px;
        }
      }
      .xumang {
        font-size: 12px;
        color: #777;
        .el-avatar {
          width: 20px;
          height: 20px;
          line-height: 20px;
          vertical-align: middle;
        }
        .n {
          padding-top: 10px;
          padding-left: 6px;
        }
      }
    }
  }
  .labels {
    width: 53px;
    height: 20px;
    background: #46a6ff;
    display: inline-block;
    border-radius: 20px 20px 0 20px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    position: absolute;
    line-height: 20px;
    top: 0;
  }
}
.project-manage .pic .el-image {
  height: 200px;
  width: 100%;
}
</style>
